import '../style/traffic.scss'
import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect,useMemo,useState } from 'react';
import { Select } from 'antd';
import lsdf from '../asset/pic/lsdf.png'
import jzg from '../asset/pic/hl.png'
import hl from '../asset/pic/hl.jpg'
import ems from '../asset/pic/ems.png'
import LineChart from '../components/lineChart';
import BarChart from '../components/barChart';
import LineChartRight from '../components/lineChartRight';
import Rader from '../components/raderChart';
import RightTable from '../components/table';
import PopModal from '../components/PopModal';
import { emsMockData,lsMockData,jzgMockData,hlMockData } from '../components/mockData/mock';
const { Option } = Select;
const Traffic= () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [coordinate,setCoordinate] = useState([])
    const [tableMockData,setTableMockData] = useState()
    var autoOptions = {
        input: "tipinput"
    };
    useEffect(()=>{
        AMapLoader.load({
            key:"20f82c7a86e45f5da26e815931a775d0",                     // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.DistrictSearch'],               // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            let map = new AMap.Map("container",{ //设置地图容器id
                viewMode:"3D",         //是否为3D地图模式
                zoom:6,                //初始化地图级别
                center:[104.066301,30.572961], //初始化地图中心点位置
                mapStyle: "amap://styles/blue",
                // layers: [new AMap.TileLayer.Satellite()],
                // pitch:70
            });
            // var map = new AMap.Map('container', {
            //     center: [116.397428, 39.90923],
            //     layers: [new AMap.TileLayer.Satellite()],
            //     zoom: 13
            // });
            let trafficLayer = new AMap.TileLayer.Traffic({
                zIndex: 10,
                zooms: [7, 22],
            });
            trafficLayer.setMap(map);
            var satellite = new AMap.TileLayer.Satellite();
            map.add(satellite)
            satellite.hide();
            document.querySelector('.serach-button').addEventListener('change',(e)=>{
                switch (document.querySelector('.serach-button').value) {
                    case '0':
                        satellite.show();
                        break;
                    case '1':
                        satellite.hide();
                        break;
                    default:
                        break;
                }
            })
            AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                auto.on("select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }
            });
            
            
            // var district = null;
            // var polygon;
            // //加载行政区划插件
            // if(!district){
            //     //实例化DistrictSearch
            //     var opts = {
            //         subdistrict: 0,   //获取边界不需要返回下级行政区
            //         extensions: 'all',  //返回行政区边界坐标组等具体信息
            //         level: 'district'  //查询行政级别为 市
            //     };
            //     district = new AMap.DistrictSearch(opts);
            // }
            // drawBounds('峨眉山')
            // drawBounds('九寨沟')
            // drawBounds('市中区')
            // // 覆盖区域
            // function drawBounds(value) {
            //     //行政区查询
            //     // district.setLevel('district')
            //     district.search(value, function(status, result) {
            //         // if(polygon){
            //         //   map.remove(polygon)//清除上次结果
            //         //     polygon  = null;
            //         // }
            //         console.log('result',result);
            //         var bounds = result.districtList[0].boundaries;
            //         if (bounds) {
            //           //生成行政区划polygon
            //           for(var i=0;i<bounds.length;i+=1){//构造MultiPolygon的path
            //             bounds[i] = [bounds[i]]
            //           }
            //           polygon = new AMap.Polygon({
            //             strokeWeight: 1,
            //             path: bounds,
            //             fillOpacity: 0.4,
            //             fillColor: '#80d8ff',
            //             strokeColor: '#0091ea'
            //           });
            //           map.add(polygon)
            //         //   map.setFitView(polygon);//视口自适应
            //         }
            //     });
            // }
                // 以 icon URL 的形式创建一个途经点
            var lsMarker = new AMap.Marker({
                position: new AMap.LngLat(103.771968,29.544055),
                // 将一张图片的地址设置为 icon
                extData:{
                    name:'ls'
                },
                icon:new AMap.Icon({            
                    image: lsdf,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50) //图标大小
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30),
                //层级范围
                zooms: [2, 15]
            });
            var emsMarker = new AMap.Marker({
                position: new AMap.LngLat(103.34,29.55),
                // 将一张图片的地址设置为 icon
                extData:{
                    name:'ems'
                },
                icon:new AMap.Icon({            
                    image: ems,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50) //图标大小
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30),
                //层级范围
                zooms: [2, 15]
            });
            var jzgMarker = new AMap.Marker({
                position: new AMap.LngLat(103.91,33.14),
                extData:{
                    name:'jzg'
                },
                // 将一张图片的地址设置为 icon
                icon:new AMap.Icon({            
                    image: jzg,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50) //图标大小
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30),
                //层级范围
                zooms: [2, 15]
            });
            var hlMarker = new AMap.Marker({
                position: new AMap.LngLat(103.84042,32.755221),
                extData:{
                    name:'hl'
                },
                // 将一张图片的地址设置为 icon
                icon:new AMap.Icon({            
                    image: hl,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50) //图标大小
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30),
                //层级范围
                zooms: [2, 15]
            });
            map.add([lsMarker,emsMarker,jzgMarker,hlMarker])
            // 声明点击事件的回调函数
            function onClick(e){
                const name = e.target.getExtData().name
                switch (name) {
                    case 'jzg':
                        setCoordinate([103.91,33.14])
                        setTableMockData(jzgMockData)
                        setIsModalOpen(!isModalOpen)
                        break;
                    case 'ls':
                        setCoordinate([103.771968,29.544055])
                        setTableMockData(lsMockData)
                        setIsModalOpen(!isModalOpen);
                        break
                    case 'ems':
                        setCoordinate([103.34,29.55])
                        setTableMockData(emsMockData)
                        setIsModalOpen(!isModalOpen)
                        break;
                     case 'hl':
                        setCoordinate([103.84042,32.755221])
                        setTableMockData(hlMockData )
                        setIsModalOpen(!isModalOpen)
                        break;
                    default:
                        break;
                }
            }
            // 给地图实例绑定点击事件 onClick
            lsMarker.on('click',onClick);
            emsMarker.on('click', onClick);
            jzgMarker.on('click', onClick);
            hlMarker.on('click', onClick);
        }).catch(e=>{
            console.log(e);
        })
    },[])
    return(
        <div className="traffic"> 
            <PopModal 
                coordinate={coordinate}
                isModalOpen={isModalOpen}
                tableMockData={tableMockData}
                setIsModalOpen={setIsModalOpen}>
            </PopModal>
            <div className="traffic-left">
                <div className='people-flow'>
                    <div className='flow-data'>
                            <div className='flow-title'>数据信息</div>
                            <div className='now-flow'>当前在园人数</div>
                            <div className='now-flow-number'>2132</div>
                            <div className='today-flow'>今日在园人数</div>
                            <div className='today-flow-number'>5132</div>
                            <div className='history-flow'>历史在园人数</div>
                            <div className='history-flow-number'>21324231</div>
                            <div className='member-flow'>在园工作人员</div>
                            <div className='member-flow-number'>519</div>
                    </div>
                </div>
                <div className='line-chart'>
                    <BarChart></BarChart>
                </div>
                
            </div>
            <div className="traffic-center">
                <div className='map-serach'>
                    <input id='tipinput' className='serach-input' placeholder='请输入查询地点'></input>
                    {/* <div className='serach-button'>搜索</div> */}
                    <select className='serach-button'>
                        <option value={1}>瓦片地图</option>
                        <option value={0}>卫星地图</option>
                    </select>
                </div>
                <div className='traffic-center-map' id="container"></div>
                <div className='time-line-chart'>
                    <LineChart ></LineChart>
                </div>
            </div>
            <div className="traffic-right">
                <div className='traffict-table traffic-rate'>
                    <LineChartRight></LineChartRight>
                </div>
                <div className='traffict-table traffic-rader'>
                    <Rader></Rader>
                </div>
                <div className='traffict-table traffic-table'>
                    <RightTable></RightTable>
                </div>
            </div>
        </div>
    )
}
export default Traffic